<div class="search-select">
  <form [formGroup]="formSelection" class="my-validate-form form-add">

    <ul class="select-choices">
      <li *ngFor="let item of selectedModels" class="select-search-choice">
        <span (click)="remove(item)" class="fa fa-times pointer" tabindex="-1"></span>
        <span *ngIf="item.type=='group' || item.type=='tag' || item.type=='issue'">{{item.name}}</span>
        <span *ngIf="item.type=='user' || !item.type">{{item.nickname}}</span>
      </li>

      <li class="select-search-field">
        <label class="select-offscreen"></label>
        <input class="form-control" name="searchInput" formControlName="searchInput" [(ngModel)]="searchModel.keywords" #searchInput
               type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
               placeholder="输入关键字搜索" class="select-input">
      </li>
    </ul>

    <div [class.hidden]="!searchResult" class="select-drop">
      <div class="select-results">
        <div *ngFor="let item of searchResult" class="select-result" [class.active]="selectedModel?.id == item.id"
             (mouseenter)="onMouseEnter($event, item)" (click)="onSelectItem($event, item)">
          <div class="image">
            <span *ngIf="item.type=='user'" class="fa fa-user"></span>
            <span *ngIf="item.type=='group'" class="fa fa-users"></span>
            <span *ngIf="item.type=='tag'" class="fa fa-tag"></span>
            <span *ngIf="item.type=='issue'" class="fa fa-bug"></span>
          </div>
          <div *ngIf="item.type=='user'" class="user-name">
            <div>{{item.nickname}}</div>
            <div>{{item.email}}</div>
          </div>
          <div *ngIf="item.type=='group' || item.type=='tag' || item.type=='issue'" class="group-name">
            <div>{{item.name}}</div>
          </div>
        </div>
      </div>

      <div class="close" (click)="cancel($event)">
        <span class="fa fa-times"></span>
      </div>

    </div>
  </form>
</div>
